<script>
	var fixHelper = function(e, ui) {
	    ui.children().each(function() {
        	$(this).width($(this).width());
	    });
	    return ui;
	};
	
	var fixPlaceholder = function(e, ui) {
		ui.helper.children().each(function() {
		  	ui.placeholder.append($(this).clone());
		});
	}
	
	$(function() {
		
		$( "#sortable" ).sortable({
			cursor: 'crosshair', 
			helper: fixHelper,
			start: fixPlaceholder,
			change: function(event, ui){
				$('#submitButton').removeClass('disabled');
			}
		});
		$( "#sortable" ).disableSelection();
	});
	
</script>
<h1><?php echo $menu->name; ?></h1>
<form action="/" id="menuForm" >
<table class="table table-bordered table-striped">
	<colgroup>
		<col class="short" />
		<col />
		<col />
		<col />
	</colgroup>
<thead>
	<tr>
		<th>Active</th>
		<th>Label</th>
		<th>Path</th>
		<th>Params</th>
	</tr>
</thead>
<tbody id="sortable">
<?php foreach ($menu->items as $item): ?>
	<tr>
		<td>
			<div class="relative">
				<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
				<input type="checkbox" />
			</div>
		</td>
		<td>
			<div class="relative">
				<?php echo $item->label; ?>
				<i class="icon-pencil"></i>
			</div>
		</td>
		<td>
			<div class="relative">
				<?php echo $item->path; ?>
				<i class="icon-pencil"></i>
			</div>
		</td>
		<td>
			<div class="relative">
				<?php echo $item->params; ?>
				<i class="icon-pencil"></i>
			</div>
		</td>
		<input name="<?php echo $menu->name; ?>_order" type="hidden" value="<?php echo $item->id; ?>" />
	</tr>
<?php endforeach ?>
</tbody>
</table>
</form>
<div class="form-actions">
	<button id="submitButton" type="submit" class="btn btn-primary disabled">Save</button>
	<button id="undoButton" type="button" class="btn">Undo</button>
</div>
<script>
	$("#submitButton").click(
		function(event){
			if(!$('#submitButton').hasClass('disabled')){
				var data = {};
				data['menu'] = <?php echo $menu->id; ?>;
				data['order'] = new Array();
				$("input[name$='<?php echo $menu->name; ?>_order']").each(function(index, el){
					data['order'].push(el.value);
				});
				
				$.post("../../updateMenu", data, function(response){
					changed = false;
					$('#submitButton').addClass('disabled');
				});
			}
		}
	);
</script>
	